import { useState, useRef, useEffect } from 'react'
import ReactECharts from 'echarts-for-react';
import 'echarts-extension-amap';
import AMap from 'AMap'
import './MapCharts.scss'

const MapCharts = () => {
  const chartsRef = useRef(null)

  const [mapOption] = useState({
    amap: {
      viewMode: '3D',
      center: [108.39, 39.9],
      zoom: 4,
      resizeEnable: true,
      mapStyle: 'amap://styles/dark',
    },
    tooltip: {
      show: true,
      formatter: (params) => {
        if (params.seriesType === 'lines') {
          return `自定义的tooltip，数据量一多就非常好看了`
        }
        return `当前坐标点的大小：${params.value[2]}`
      }
    },
    series: [
      {
        type: "lines",
        zlevel: 2,
        coordinateSystem: "amap",
        symbolSize: 10,
        effect: {
          show: true,
          period: 3,
          trailLength: 0,
          symbol: "arrow", // 可以换成其他的图标
          symbolSize: 10,
        },
        lineStyle: {
          color: "#A6C84D",
          width: 2, //尾迹线条宽度
          opacity: 1, //尾迹线条透明度
          curveness: 0.3, //尾迹线条曲直度
        },
        data: [
          {
            fromName: '开始地区',
            toName: '目的地',
            lineStyle: {
              color: "blue",
              width: 2, //尾迹线条宽度
              opacity: 1, //尾迹线条透明度
              curveness: 0.3, //尾迹线条曲直度
            },
            effect: {
              show: true,
              period: 3,
              trailLength: 0,
              symbol: "arrow", // 可以换成其他的图标
              symbolSize: 10,
              color: '#fff'
            },
            coords: [[105.171696, 31.780457], [112.082857, 35.698858]],
            value: 8
          },
          {
            fromName: '开始地区',
            toName: '目的地',
            coords: [[105.171696, 31.780457], [112.082857, 24.698858]],
            value: 8
          }
        ],
      },
      {
        name: 333,
        type: "effectScatter",
        coordinateSystem: "amap",
        // coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          brushType: "stroke",
        },
        label: {
          show: true,
            position: "right",
            formatter: "{b}",
        },
        symbolSize: function () {
          return 8;
        },
        itemStyle: {
          show: false,
          color: "#A6C84D",
        },
        emphasis: {
          itemStyle: {
            areaColor: "#A6C84D",
          }
        },
        data: [
          {
            name: '开始地区',
            value: [105.171696, 31.780457, 2]
          }
        ]
      },
      //被攻击点
      {
        type: "scatter",
        coordinateSystem: "amap",
        // coordinateSystem: "geo",
        zlevel: 2,
        rippleEffect: {
          //涟漪特效
          period: 4, //动画时间，值越小速度越快
          brushType: "stroke", //波纹绘制方式 stroke, fill
          scale: 10, //波纹圆环最大限制，值越大波纹越大
        },
        label: {
          show: true,
          position: "right", //显示位置
          offset: [5, 0], //偏移设置
          formatter: "{b}",
          fontSize: 14,
          color: "#ff0",
        },
        emphasis: {
          label: {
            show: true,
            color: "#A6C84D",
          }
        },
        symbol: "pin",
        symbolSize: 20,
        itemStyle: {
          color: "#A6C84D",
        },
        data: [
          {
            name: '目的地',
            value: [112.082857, 35.698858, 2]
          },
          {
            name: '目的地',
            value: [112.082857, 24.698858, 10]
          }
        ]
      }
    ]
  })

  useEffect(() => {
    const amapComponent = chartsRef.current.getEchartsInstance().getModel().getComponent('amap')
    const amap = amapComponent.getAMap();
    amap.addControl(new AMap.Scale());
    amap.addControl(new AMap.ToolBar());
    amap.add(new AMap.Marker({
      position: [115, 35]
    }));
    // 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
    // amapComponent.setEChartsLayerInteractive(false);
  }, [])

  return (
    <div className="map-charts-page">
      <ReactECharts ref={chartsRef} option={mapOption} style={{width: '100%', height: '100%'}}/>
    </div>
  )
}

export default MapCharts